<template>
    <div class="Basicinformation">
        <div class="Basicinformationtitle">
            <ul class="property">
                <li>物业信息</li>
            </ul>
        </div>
        <div class="Basicinformationcontent">
            <div class="basicin">
                <p class="title">基本信息</p>
                <ul class="contentlists">
                    <li>
                        <div class="greylists">物业名称：</div>
                        <div class="whitelists">碧桂园物业管理有限公司</div>
                    </li>
                    <li>
                        <div class="greylists">物业公司简称：</div>
                        <div class="whitelists">碧桂园物业</div>
                    </li>
                    <li>
                        <div class="greylists">所在地区：</div>
                        <div class="whitelists">北京市-北京-东城区</div>
                    </li>
                    <li>
                        <div class="greylists">物业logo：</div>
                        <div class="whitelists">碧桂园物业管理有限公司</div>
                    </li>
                    <li>
                        <div class="greylists">物业经纬度：</div>
                        <div class="whitelists">113.336801,22.792051</div>
                    </li>
                    <li>
                        <div class="greylists">物业联系方式：</div>
                        <div class="whitelists">初步意向</div>
                    </li>
                    <li>
                        <div class="greylists">备注信息：</div>
                        <div class="whitelists"></div>
                    </li>
                </ul>
            </div>
            <div class="basicin">
                <p class="title"> 修改密码</p>
                <ul class="contentlists">
                    <li>
                        <div class="greylists">原密码：</div>
                        <div class="whitelists codes"><el-input v-model="input" placeholder="请输入登录密码" class="code"></el-input>不修改密码可不填写</div>
                    </li>
                    <li>
                        <div class="greylists">新密码：</div>
                        <div class="whitelists codes"><el-input v-model="input" placeholder="请输入登录密码" class="code"></el-input>不修改密码请留空，最少6个字符</div>
                    </li>
                    <li>
                        <div class="greylists">确认密码：</div>
                        <div class="whitelists codes"><el-input v-model="input" placeholder="请输入登录密码" class="code"></el-input>请再输入一次上面的新密码，以便确认输对了</div>
                    </li>
                </ul>
            </div>
            <div class="inputbox">
                <el-button type="primary" class="savebutton" @click="save">保存</el-button>
            </div>
        </div>
        
    </div>
</template>

<script>
export default {
    data(){
        return{
            input:''
        }
    },
    methods:{
        save(){
            console.log('保存')
        }
    }
}
</script>

<style lang="scss" scoped>
    .Basicinformation{
        width: 1260px;
        margin: auto;
        background-color: #fff;
        height: 80vh;
        overflow: scroll;
        scrollbar-width: none;
        .Basicinformationtitle{
            width: 100%;
            height: 50px;
            border-bottom: 1px solid rgba(233, 233, 233, 1);
            box-sizing: border-box;
            .property{
                width: 100%;
                height: 50px;
                display: flex;
                align-items: center;
                li{
                    width: 100px;
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    color: rgb(0, 121, 254);
                    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
                    font-weight: 700;
                    font-size: 14px;
                    position: relative;
                }
                li::after{
                    content: '';
                    width: 100%;
                    height: 2px;
                    background: rgb(0, 121, 254);
                    position: absolute;
                    bottom: 0;
                    left: 0;
                }
            }
        }
        .Basicinformationcontent{
            width: 1200px;
            margin: auto;
            .basicin{
                width: 100%;
                .title{
                    height: 40px;
                    line-height: 40px;
                    font-size: 14px;
                    color: #666666;
                    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
                    font-weight: 700;
                }
                .contentlists{
                    width: 100%;
                    li{
                        display: flex;
                        height: 40px;
                        align-items: center;
                        border: 1px solid #e9e9e9;
                        font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
                        font-size: 12px;
                        color: #666666;
                        .greylists{
                            width: 200px;
                            height: 40px;
                            line-height: 40px;
                            background-color: #f5f5f5;
                            text-align: right;
                            padding-right: 20px;
                            border-right: 1px solid #e9e9e9;
                            font-weight: 700;
                        }
                        .codes{
                            font-size: 12px;
                            color: #ccc !important;
                        }
                        .whitelists{
                            width: 1000px;
                            height: 40px;
                            line-height: 40px;
                            background-color: #fff;
                            padding-left: 20px;
                            .code{
                                width: 223px;
                            }
                            
                            ::v-deep .el-input__inner{
                                width: 223px;
                                padding-left: 0 ;
                                border: none;
                                outline: none;
                            }
                        }
                    }
                }
            }
            .inputbox{
                width: 100%;
                margin-top: 10px;
                text-align: center;
                .savebutton{
                    width: 140px;
                    height: 40px;
                    background-color: rgba(0, 121, 254, 1);
                }
                .savebutton:hover{
                    background-color: #3394fe !important;
                    color: #fff !important;
                }
            }
        }
    }
</style>